"use client"; // 确保这是客户端组件

import React, { useState, useEffect, Suspense, useCallback } from 'react';
import { useSearchParams, useRouter } from 'next/navigation';
import Editor from '@monaco-editor/react'; // 导入 Monaco Editor
import ReactMarkdown from 'react-markdown';
import remarkGfm from 'remark-gfm';
import { getProject, save_project, ProjectData, executeCode, evaluateCode, ExecResult, EvaluateResult } from '../services/api'; // 导入 API 函数和类型
import LoadingOverlay from '../components/LoadingOverlay'; // 导入加载组件

// --- 辅助组件处理 Suspense 和客户端逻辑 ---
function ProjectPageContent() {
    const searchParams = useSearchParams();
    const router = useRouter();

    // --- 状态管理 ---
    const [projectData, setProjectData] = useState<ProjectData | null>(null); // 项目数据
    const [editorCode, setEditorCode] = useState<string>(''); // 编辑器中的代码
    const [isLoading, setIsLoading] = useState<boolean>(true); // 初始加载状态
    const [isSaving, setIsSaving] = useState<boolean>(false); // 保存状态
    const [error, setError] = useState<string | null>(null); // 错误信息
    const [saveSuccess, setSaveSuccess] = useState<boolean>(false); // 保存成功提示
    const [execResult, setExecResult] = useState<ExecResult | null>(null); // 代码运行结果
    const [evaluationResult, setEvaluationResult] = useState<EvaluateResult | null>(null); // AI 评价结果
    const [isRunning, setIsRunning] = useState<boolean>(false); // 运行状态
    const [isEvaluating, setIsEvaluating] = useState<boolean>(false); // 评价状态
    const [activeTab, setActiveTab] = useState<'readme' | 'output' | 'evaluation'>('readme'); // 右侧活动标签页

    // --- 从 URL 获取参数 ---
    const userId = searchParams.get('user_id');
    const lang = searchParams.get('lang');
    const direction = searchParams.get('direction');
    const stepStr = searchParams.get('step');
    const projectIndexStr = searchParams.get('project_index');

    // --- 参数校验和转换 ---
    const step = stepStr ? parseInt(stepStr, 10) : null;
    const projectIndex = projectIndexStr ? parseInt(projectIndexStr, 10) : null;

    // --- 数据获取 ---
    useEffect(() => {
        // 检查所有必要参数是否存在且有效
        if (!userId || !lang || direction === null || step === null || isNaN(step) || projectIndex === null || isNaN(projectIndex)) {
            setError('缺少必要的URL参数 (user_id, lang, direction, step, project_index) 或参数格式不正确。');
            setIsLoading(false);
            return;
        }

        const fetchProjectData = async () => {
            setIsLoading(true);
            setError(null);
            try {
                const data = await getProject(userId, lang, direction, step, projectIndex);
                setProjectData(data);
                setEditorCode(data.code || ''); // 初始化编辑器代码
            } catch (err: any) {
                console.error("获取项目数据失败:", err);
                setError(err.message || '获取项目数据时发生未知错误');
            } finally {
                setIsLoading(false);
            }
        };

        fetchProjectData();
    }, [userId, lang, direction, step, projectIndex]); // 依赖于所有从URL获取的参数

    // --- 处理函数 ---
    const handleEditorChange = (value: string | undefined) => {
        setEditorCode(value || '');
    };

    const handleCopyAnswer = () => {
        if (projectData?.answer) {
            navigator.clipboard.writeText(projectData.answer)
                .then(() => {
                    alert('参考答案已复制到剪贴板！'); // 简单提示
                })
                .catch(err => {
                    console.error('复制失败:', err);
                    alert('复制参考答案失败。');
                });
        } else {
            alert('没有可复制的参考答案。');
        }
    };

    const handleSave = async () => {
        if (!projectData || !userId || !lang || direction === null || step === null || isNaN(step)) {
            setError('缺少必要信息，无法保存。');
            return;
        }
        // 检查 projectData 是否存在，以防万一
        if (!projectData) {
             setError('项目数据未加载，无法保存。');
             return;
        }

        setIsSaving(true);
        setError(null);
        setSaveSuccess(false); // 重置保存成功状态

        try {
            // 使用当前编辑器中的代码创建新的 projectData 对象
            const updatedProjectData: ProjectData = {
                ...projectData, // 保留 name, md, answer
                code: editorCode, // 更新 code
            };
            // 确保 projectIndex 存在且有效
            if (projectIndex === null || isNaN(projectIndex)) {
              setError('缺少 projectIndex，无法保存。');
              setIsSaving(false); // 确保在出错时重置保存状态
              return;
            }
            await save_project(userId, lang, direction, step, projectIndex, updatedProjectData); // 使用 save_project 并传入 projectIndex
            setSaveSuccess(true); // 设置保存成功状态
            // 更新 projectData 状态以反映保存后的代码（虽然编辑器已经是最新的）
            setProjectData(updatedProjectData);
            // 短暂显示成功消息后清除
            setTimeout(() => setSaveSuccess(false), 3000);
        } catch (err: any) {
            console.error("保存项目失败:", err);
            setError(err.message || '保存项目时发生未知错误');
        } finally {
            setIsSaving(false);
        }
    };

    const handleRun = async () => {
        // --- 1. 参数检查 ---
        if (!userId || !lang || direction === null || step === null || isNaN(step) || projectIndex === null || isNaN(projectIndex)) {
            setError('缺少必要信息，无法运行代码。');
            return;
        }

        // --- 2. 先执行保存 ---
        setIsSaving(true); // 短暂显示保存状态
        setError(null);
        setSaveSuccess(false);
        let saveSucceeded = false;
        try {
            // 调用保存函数，注意 handleSave 内部会设置 isSaving 和 error
            await handleSave();
            // 检查 handleSave 是否设置了 error
            if (!error) { // 使用 error state 来判断保存是否成功
                 saveSucceeded = true;
                 setSaveSuccess(false); // 清除短暂的保存成功提示，避免干扰运行状态
            } else {
                 console.error("保存失败，取消运行:", error);
                 // error 已经被 handleSave 设置，无需重复设置
            }
        } catch (saveErr) {
            // 理论上 handleSave 内部会捕获并设置 error，这里是额外的保险
            console.error("调用 handleSave 时发生意外错误:", saveErr);
            setError('保存过程中发生意外错误，请重试。');
        } finally {
             setIsSaving(false); // 结束保存状态
        }

        // 如果保存失败，则不继续运行
        if (!saveSucceeded) {
            return;
        }

        // --- 3. 执行运行逻辑 ---
        setIsRunning(true);
        setIsEvaluating(false); // 重置评价状态
        setExecResult(null); // 清除旧结果
        setEvaluationResult(null); // 清除旧评价
        // setError(null); // 不清除保存时可能产生的错误，但运行错误会覆盖它
        setActiveTab('output'); // 切换到输出标签页

        try {
            const result = await executeCode(userId, lang, direction, step, projectIndex, editorCode);
            setExecResult(result);

            // 只要有可用的测试结果 (非空数组)，就尝试进行评估，无论是否全部通过
            if (result.test_results && Array.isArray(result.test_results) && result.test_results.length > 0) {
                setIsEvaluating(true); // 开始评价
                try {
                    const evaluation = await evaluateCode(userId, lang, direction, step, projectIndex, result.test_results, editorCode);
                    setEvaluationResult(evaluation);
                    setActiveTab('evaluation'); // 成功获取评价后切换到评价标签页
                } catch (evalErr: any) {
                    console.error("评估代码失败:", evalErr);
                    // 如果评估失败，设置错误信息，但保留执行结果显示，并停留在输出页
                    setError(`代码评估失败: ${evalErr.message || '未知评估错误'}`);
                    setActiveTab('output'); // 停留在输出页显示执行结果和评估错误
                } finally {
                    setIsEvaluating(false); // 结束评价状态
                }
            } else if (!result.test_results) {
                 // 如果后端根本没有返回 test_results (可能是编译错误等)
                 setError(result.message || '代码执行或测试过程中发生错误，未返回测试结果，无法评估。');
                 setActiveTab('output');
            } else {
                 setError(result.message || '代码执行遇到未知状态。');
                 setActiveTab('output');
            }

        } catch (runErr: any) {
            console.error("运行代码失败:", runErr);
            setError(runErr.message || '运行代码时发生未知错误');
            setExecResult(null); // 运行出错时，清除可能存在的旧结果或部分结果
        } finally {
            setIsRunning(false); // 结束运行（无论是否开始评价）
        }
    };

    // --- 渲染逻辑 ---
    if (isLoading) {
        return <LoadingOverlay message="加载项目数据中..." />;
    }

    if (error) {
        return (
            <div className="flex items-center justify-center min-h-screen bg-gray-100 dark:bg-gray-900 p-4">
                <div className="bg-red-100 border border-red-400 text-red-700 px-4 py-3 rounded relative max-w-lg text-center" role="alert">
                    <strong className="font-bold">错误!</strong>
                    <span className="block sm:inline"> {error}</span>
                    <button
                        onClick={() => router.back()} // 提供返回按钮
                        className="mt-4 bg-red-500 hover:bg-red-700 text-white font-bold py-2 px-4 rounded"
                    >
                        返回
                    </button>
                </div>
            </div>
        );
    }

    if (!projectData) {
        // 如果没有错误但数据仍未加载（理论上不应发生，除非参数检查后 fetch 失败但未设 error）
        return <div className="flex items-center justify-center min-h-screen">无法加载项目数据。</div>;
    }

    return (
        <div className="flex flex-col h-screen bg-gray-100 dark:bg-gray-900 text-gray-900 dark:text-gray-100">
            {/* 顶部标题栏 */}
            <header className="bg-gray-800 text-white p-2 shadow-md flex justify-between items-center">
                <h1 className="text-lg font-semibold">{projectData.name || '项目页面'}</h1>
                {/* 可以添加返回按钮或其他导航元素 */}
                 <button
                    onClick={() => router.back()}
                    className="bg-blue-500 hover:bg-blue-700 text-white font-bold py-1 px-3 rounded text-sm"
                >
                    返回列表
                </button>
            </header>

            {/* 主要内容区域 - 水平分割 */}
            <main className="flex-grow flex flex-row overflow-hidden p-2 gap-2">
                {/* 左半边 - 编辑器和按钮 */}
                <div className="flex flex-col w-1/2 h-full">
                    {/* 编辑器区域 */}
                    <div className="flex-grow border border-gray-300 dark:border-gray-600 rounded-md overflow-hidden">
                        <Editor
                            height="100%"
                            language={lang || 'plaintext'}
                            value={editorCode}
                            onChange={handleEditorChange}
                            theme="vs-dark"
                            options={{
                                minimap: { enabled: false },
                                scrollBeyondLastLine: false,
                                fontSize: 14,
                            }}
                        />
                    </div>
                    {/* 按钮区域 */}
                    <div className="flex justify-start items-center gap-2 p-2 mt-1 bg-gray-200 dark:bg-gray-700 rounded-md">
                        <button
                            onClick={handleCopyAnswer}
                            className="bg-yellow-500 hover:bg-yellow-600 text-white font-bold py-2 px-4 rounded text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-yellow-400"
                        >
                            复制参考答案
                        </button>
                        <button
                            onClick={handleSave}
                            disabled={isSaving || isRunning || isEvaluating} // 保存时、运行时、评价时禁用
                            className={`bg-green-600 hover:bg-green-700 text-white font-bold py-2 px-4 rounded text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-green-500 ${(isSaving || isRunning || isEvaluating) ? 'opacity-50 cursor-not-allowed' : ''}`}
                        >
                            {isSaving ? '保存中...' : '保存'}
                        </button>
                        <button
                            onClick={handleRun}
                            disabled={isRunning || isEvaluating || isSaving} // 运行时、评价时、保存时禁用
                            className={`bg-blue-500 hover:bg-blue-600 text-white font-bold py-2 px-4 rounded text-sm focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-blue-400 ${(isRunning || isEvaluating || isSaving) ? 'opacity-50 cursor-not-allowed' : ''}`}
                        >
                            {isRunning ? '运行中...' : (isEvaluating ? '评价中...' : '运行代码')}
                        </button>
                         {/* 保存成功提示 */}
                         {saveSuccess && (
                            <span className="text-green-600 dark:text-green-400 ml-4 text-sm font-semibold">保存成功!</span>
                        )}
                         {/* 运行/评价错误提示 */}
                         {error && !isLoading && !isSaving && ( // 只在非加载和非保存状态下显示运行/评价错误
                            <span className="text-red-600 dark:text-red-400 ml-4 text-sm font-semibold truncate" title={error}>错误: {error}</span>
                         )}
                    </div>
                </div>

                {/* 右半边 - Tabbed 内容区域 */}
                <div className="w-1/2 h-full flex flex-col border border-gray-300 dark:border-gray-600 rounded-md bg-white dark:bg-gray-800 overflow-hidden">
                    {/* Tab 按钮 */}
                    <div className="flex border-b border-gray-300 dark:border-gray-600">
                        <button
                            onClick={() => setActiveTab('readme')}
                            className={`py-2 px-4 text-sm font-medium ${activeTab === 'readme' ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'}`}
                        >
                            项目说明 (README)
                        </button>
                        <button
                            onClick={() => setActiveTab('output')}
                            disabled={!execResult && !isRunning} // 没结果且没在运行时禁用
                            className={`py-2 px-4 text-sm font-medium ${activeTab === 'output' ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'} ${(!execResult && !isRunning) ? 'opacity-50 cursor-not-allowed' : ''}`}
                        >
                            运行结果
                        </button>
                        <button
                            onClick={() => setActiveTab('evaluation')}
                            disabled={!evaluationResult && !isEvaluating} // 没结果且没在评价时禁用
                            className={`py-2 px-4 text-sm font-medium ${activeTab === 'evaluation' ? 'border-b-2 border-blue-500 text-blue-600 dark:text-blue-400' : 'text-gray-500 hover:text-gray-700 dark:text-gray-400 dark:hover:text-gray-200'} ${(!evaluationResult && !isEvaluating) ? 'opacity-50 cursor-not-allowed' : ''}`}
                        >
                            AI 评价
                        </button>
                    </div>
                    {/* Tab 内容 */}
                    <div className="flex-grow overflow-y-auto p-4">
                        {activeTab === 'readme' && (
                            <div className="prose dark:prose-invert max-w-none">
                                <ReactMarkdown remarkPlugins={[remarkGfm]}>{projectData.md || '没有可显示的说明文档。'}</ReactMarkdown>
                            </div>
                        )}
                        {activeTab === 'output' && (
                            <div>
                                {isRunning && <p className="text-gray-500 dark:text-gray-400">正在运行代码...</p>}
                                {execResult ? (
                                    <div>
                                        {/* --- 总体测试状态 --- */}
                                        <h3 className={`text-lg font-semibold mb-2 ${execResult.all_passed === true ? 'text-green-600 dark:text-green-400' : 'text-red-600 dark:text-red-400'}`}>
                                            测试 {typeof execResult.all_passed === 'boolean' ? (execResult.all_passed ? '全部通过' : '未全部通过') : '状态未知'}
                                        </h3>
                                        {/* --- 后端消息 (例如编译错误) --- */}
                                        {execResult.message && <p className="mb-2 text-sm text-gray-600 dark:text-gray-400 bg-gray-100 dark:bg-gray-700 p-2 rounded">{execResult.message}</p>}
                                        {/* --- 标准输出 --- */}
                                        {execResult.output && (
                                            <div className="mb-4">
                                                <h4 className="font-semibold mb-1 text-gray-700 dark:text-gray-300">代码标准输出:</h4>
                                                <pre className="bg-gray-100 dark:bg-gray-700 p-2 rounded text-sm overflow-x-auto">{execResult.output}</pre>
                                            </div>
                                        )}
                                        {/* --- 详细测试结果展示 --- */}
                                        {execResult.test_results && Array.isArray(execResult.test_results) && execResult.test_results.length > 0 && (
                                            <div>
                                                <h4 className="font-semibold mb-2 text-gray-700 dark:text-gray-300">详细测试结果:</h4>
                                                <div className="space-y-3">
                                                    {execResult.test_results.map((test, index) => (
                                                        <div key={index} className={`p-3 rounded border ${test.passed ? 'border-green-300 dark:border-green-600 bg-green-50 dark:bg-gray-800' : 'border-red-300 dark:border-red-600 bg-red-50 dark:bg-gray-800'}`}>
                                                            <p className={`font-semibold mb-1 ${test.passed ? 'text-green-700 dark:text-green-400' : 'text-red-700 dark:text-red-400'}`}>
                                                                测试用例 {index + 1}: {test.passed ? '通过 ✔' : '失败 ✘'}
                                                            </p>
                                                            {/* 输入 */}
                                                            {test.input !== undefined && (
                                                                <div className="text-sm mb-1">
                                                                    <strong className="text-gray-600 dark:text-gray-400">输入:</strong>
                                                                    <pre className="bg-gray-200 dark:bg-gray-700 p-1 rounded text-xs mt-1 overflow-x-auto">{JSON.stringify(test.input, null, 2)}</pre>
                                                                </div>
                                                            )}
                                                            {/* 预期输出 */}
                                                            {test.expected_output !== undefined && (
                                                                <div className="text-sm mb-1">
                                                                    <strong className="text-gray-600 dark:text-gray-400">预期输出:</strong>
                                                                    <pre className="bg-gray-200 dark:bg-gray-700 p-1 rounded text-xs mt-1 overflow-x-auto">{JSON.stringify(test.expected_output, null, 2)}</pre>
                                                                </div>
                                                            )}
                                                            {/* 实际输出 */}
                                                            {test.actual_output !== undefined && (
                                                                <div className="text-sm">
                                                                    <strong className="text-gray-600 dark:text-gray-400">实际输出:</strong>
                                                                    <pre className={`p-1 rounded text-xs mt-1 overflow-x-auto ${test.passed ? 'bg-gray-200 dark:bg-gray-700' : 'bg-red-100 dark:bg-red-700/50'}`}>{JSON.stringify(test.actual_output, null, 2)}</pre>
                                                                </div>
                                                            )}
                                                            {/* 错误信息 (如果有) */}
                                                            {test.error && (
                                                                <div className="text-sm mt-1">
                                                                    <strong className="text-red-600 dark:text-red-400">错误信息:</strong>
                                                                    <pre className="bg-red-100 dark:bg-red-700/50 p-1 rounded text-xs mt-1 overflow-x-auto">{test.error}</pre>
                                                                </div>
                                                            )}
                                                        </div>
                                                    ))}
                                                </div>
                                            </div>
                                        )}
                                        {/* 如果 test_results 不是预期的数组格式或为空数组，显示提示 */}
                                        {(!execResult.test_results || !Array.isArray(execResult.test_results) || execResult.test_results.length === 0) && !execResult.message && !execResult.output && (
                                             <p className="text-gray-500 dark:text-gray-400 mt-2">未返回详细测试结果。</p>
                                        )}
                                    </div>
                                ) : (
                                    !isRunning && <p className="text-gray-500 dark:text-gray-400">点击 "运行代码" 来查看结果。</p>
                                )}
                                {/* 显示运行或评估过程中的错误 */}
                                {error && !isLoading && !isSaving && !isRunning && !isEvaluating && (
                                    <p className="text-red-600 dark:text-red-400 mt-4">错误: {error}</p>
                                )}
                            </div>
                        )}
                        {activeTab === 'evaluation' && (
                            <div>
                                {isEvaluating && <p className="text-gray-500 dark:text-gray-400">AI 正在评价代码...</p>}
                                {evaluationResult ? (
                                    <div>
                                        <h3 className="text-lg font-semibold mb-2 text-gray-800 dark:text-gray-200">AI 评价</h3>
                                        {/* 假设评价结果是 Markdown 格式 */}
                                        <div className="prose dark:prose-invert max-w-none">
                                            <ReactMarkdown remarkPlugins={[remarkGfm]}>{evaluationResult.evaluation}</ReactMarkdown>
                                        </div>
                                    </div>
                                ) : (
                                    !isEvaluating && <p className="text-gray-500 dark:text-gray-400">运行代码成功后将显示 AI 评价。</p>
                                )}
                                {/* 如果评价失败，也在这里显示错误 */}
                                {error && activeTab === 'evaluation' && !isEvaluating && (
                                     <p className="text-red-600 dark:text-red-400 mt-4">评价失败: {error}</p>
                                )}
                            </div>
                        )}
                    </div>
                </div>
            </main>
        </div>
    );
}

// --- 默认导出，使用 Suspense 包裹 ---
export default function ProjectPage() {
  return (
    <Suspense fallback={<LoadingOverlay message="加载页面参数..." />}>
       <ProjectPageContent />
    </Suspense>
  );
}